<template>
  <view class="cards-container">
   
    <top-navigation backIconColor='#FFF' bgColor="#FFF" :isFix='false' :isShow='true' :isBack="false">
    			<text slot='center-slot' class="center-slot">权益卡</text>
    		</top-navigation>
    <view class="cards-list">
      <!-- 限时不限次权益卡 -->
      <view class="card-item time-limited" v-if="false">
        <view class="card-header">
          <text class="card-title">限时不限次权益卡</text>
          <text class="card-tag">热门</text>
        </view>
        
        <view class="card-body">
          <view class="price-info">
            <text class="price">¥1999</text>
            <text class="period">/30天</text>
          </view>
          
          <view class="benefits">
            <text class="benefit-item">• 有效期内不限次数使用</text>
            <text class="benefit-item">• 包含所有国内贵宾基础服务</text>
            <text class="benefit-item">• 国际贵宾通道8折优惠</text>
            <text class="benefit-item">• 专属包房9折优惠</text>
          </view>
        </view>
        
        <view class="card-footer">
          <button class="buy-btn" @click="buyCard('time-limited')">立即购买</button>
        </view>
      </view>
      
      <!-- 限次不限时权益卡 -->
      <view class="card-item count-limited" v-if="false">
        <view class="card-header">
          <text class="card-title">限次不限时权益卡</text>
        </view>
        
        <view class="card-body">
          <view class="price-info">
            <text class="price">¥2999</text>
            <text class="period">/10次</text>
          </view>
          
          <view class="benefits">
            <text class="benefit-item">• 不限时间使用，共10次</text>
            <text class="benefit-item">• 包含所有国内贵宾基础服务</text>
            <text class="benefit-item">• 国际贵宾通道7折优惠</text>
            <text class="benefit-item">• 专属包房8折优惠</text>
          </view>
        </view>
        
        <view class="card-footer">
          <button class="buy-btn" @click="buyCard('count-limited')">立即购买</button>
        </view>
      </view>
    </view>
    
    <!-- 我的权益卡 -->
    <view class="my-cards" v-if="myCards.length > 0">
      <view class="section-title">我的权益卡</view>
      <view class="my-cards-list">
        <view class="my-card-item" v-for="(card, index) in myCards" :key="index">
          <view class="card-info">
            <text class="card-name">{{ card.type === 'time-limited' ? '限时不限次权益卡' : '各类产品' }}</text>
            <text class="card-status">{{ card.status === 'active' ? '使用中' : '已过期' }}</text>
          </view>
          <view class="card-detail">
            <text class="detail-item" v-if="card.type === 'time-limited'">
              有效期至: {{ card.expireDate }}
            </text>
            <text class="detail-item" v-if="card.type === 'count-limited'">
              剩余次数: {{ card.remainingCount }}次
            </text>
          </view>
          <button class="use-btn" @click="showQrcode = true; currentQrcodeId = card.id" :disabled="card.status !== 'active'">
            出示二维码
          </button>
		  <!-- 二维码展示区域（默认隐藏） -->
		           <view class="qrcode-container" v-if="showQrcode && currentQrcodeId === card.id">
		             <view class="qrcode-mask" @click="hideQrcode"></view>
		             <view class="qrcode-popup">
		               <view class="qrcode-header">
		                 <text class="qrcode-title">权益卡核销码</text>
		                 <text class="qrcode-close" @click="hideQrcode">×</text>
		               </view>
		               
		               <view class="qrcode-content">
		                 <image 
		                   :src="card.qrcodeUrl || '/static/images/qrcode-placeholder.png'" 
		                   mode="widthFix" 
		                   class="qrcode-image"
		                 ></image>
		                 <text class="qrcode-desc">请出示此码进行核销</text>
		                 <text class="card-number">卡号: {{ generateCardNumber(card.id) }}</text>
		               </view>
		               
		               <view class="qrcode-footer">
		                 <text class="expire-info" v-if="card.type === 'time-limited'">
		                   有效期至: {{ card.expireDate }}
		                 </text>
		                 <text class="expire-info" v-if="card.type === 'count-limited'">
		                   剩余次数: {{ card.remainingCount }}次
		                 </text>
		               </view>
		             </view>
		           </view>
        </view>
      </view>
	
    </view>
	 
  </view>
</template>

<script>
export default {
  data() {
    return {
		showQrcode: false,       // 是否显示二维码
		      currentQrcodeId: null,    // 当前显示的二维码ID
      myCards: [
        {
          id: 1,
          type: 'time-limited',
          status: 'active',
          expireDate: '2023-12-31'
        },
        {
          id: 2,
          type: 'count-limited',
          status: 'active',
          remainingCount: 5
        }
      ]
    }
  },
  methods: {
	  // 显示二维码
	      // showQrcode(cardId) {
	      //   this.currentQrcodeId = cardId;
	      //   this.showQrcode = true;
	      // },
	      // 隐藏二维码
	      hideQrcode() {
	        this.showQrcode = false;
	        this.currentQrcodeId = null;
	      },
		  // 计算过期日期
		      calculateExpireDate(days) {
		        const date = new Date();
		        date.setDate(date.getDate() + days);
		        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
		      },
		      // 生成卡号
		      generateCardNumber(id) {
		        // 生成类似 "VIP" + 8位数字的卡号
		        const prefix = 'VIP';
		        const num = id.toString().slice(-8).padStart(8, '0');
		        return `${prefix}${num}`;
		      },
    navBack() {
      uni.navigateBack();
    },
    buyCard(type) {
      // 检查登录状态
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) {
        uni.navigateTo({ url: '/pages/login/index' });
        return;
      }
      
      // 模拟购买流程
      const cardName = type === 'time-limited' ? '限时不限次权益卡' : '限次不限时权益卡';
      uni.showModal({
        title: '购买确认',
        content: `您确定要购买${cardName}吗？`,
        success: (res) => {
          if (res.confirm) {
            // 调用支付接口
            uni.showLoading({ title: '支付中...' });
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({ title: '购买成功' });
              
              // 添加到我的权益卡
              const newCard = {
                id: Date.now(),
                type,
                status: 'active',
                expireDate: type === 'time-limited' ? this.calculateExpireDate(30) : null,
                remainingCount: type === 'count-limited' ? 10 : null
              };
              this.myCards.unshift(newCard);
            }, 1500);
          }
        }
      });
    },
    useCard(card) {
      // 展示二维码
      uni.navigateTo({
        url: `/pages/cards/qrcode?id=${card.id}`
      });
    },
    calculateExpireDate(days) {
      const date = new Date();
      date.setDate(date.getDate() + days);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.cards-container {
  background-color: #f5f5f5;
  min-height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
  
  .nav-bar {
    display: flex;
    align-items: center;
    padding: 30rpx 20rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    
    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .cards-list {
    // padding: 30rpx;
    
    .card-item {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
      
      &.time-limited {
        border-top: 8rpx solid #1a73e8;
      }
      
      &.count-limited {
        border-top: 8rpx solid #07c160;
      }
      
      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .card-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .card-tag {
          margin-left: 15rpx;
          background-color: #ff4d4f;
          color: #fff;
          font-size: 22rpx;
          padding: 3rpx 15rpx;
          border-radius: 20rpx;
        }
      }
      
      .card-body {
        .price-info {
          margin-bottom: 25rpx;
          
          .price {
            font-size: 40rpx;
            font-weight: bold;
            color: #ff4d4f;
          }
          
          .period {
            font-size: 26rpx;
            color: #666;
            margin-left: 10rpx;
          }
        }
        
        .benefits {
          .benefit-item {
            display: block;
            font-size: 26rpx;
            color: #666;
            margin-bottom: 15rpx;
            line-height: 1.5;
          }
        }
      }
      
      .card-footer {
        margin-top: 30rpx;
        
        .buy-btn {
          width: 100%;
          height: 90rpx;
          line-height: 90rpx;
          border-radius: 80rpx;
          font-size: 30rpx;
          background-color: #1a73e8;
          color: #fff;
        }
        
        .time-limited & .buy-btn {
          background-color: #1a73e8;
        }
        
        .count-limited & .buy-btn {
          background-color: #07c160;
        }
      }
    }
  }
  
  .my-cards {
	  margin-top: 30rpx;
    padding: 0 30rpx 30rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .my-cards-list {
      .my-card-item {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 25rpx;
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: column;
        
        .card-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15rpx;
          
          .card-name {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
          }
          
          .card-status {
            font-size: 24rpx;
            padding: 5rpx 15rpx;
            border-radius: 20rpx;
            background-color: #e6f7ee;
            color: #07c160;
          }
        }
        
        .card-detail {
          margin-bottom: 20rpx;
          
          .detail-item {
            font-size: 24rpx;
            color: #666;
          }
        }
        
        .use-btn {
          height: 70rpx;
          line-height: 70rpx;
          border-radius: 60rpx;
          font-size: 26rpx;
          background-color: #1a73e8;
          color: #fff;
        }
        
        .use-btn:disabled {
          background-color: #e0e0e0;
          color: #999;
        }
      }
    }
  }
}
// 二维码相关样式
  .qrcode-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .qrcode-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .qrcode-popup {
    position: relative;
    width: 600rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    z-index: 1000;
  }
  
  .qrcode-header {
    padding: 30rpx;
    background-color: #1a73e8;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .qrcode-title {
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .qrcode-close {
      font-size: 40rpx;
      line-height: 1;
    }
  }
  
  .qrcode-content {
    padding: 40rpx 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .qrcode-image {
      width: 300rpx;
      height: 300rpx;
      margin-bottom: 20rpx;
      background-color: #f5f5f5;
      padding: 10rpx;
    }
    
    .qrcode-desc {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 15rpx;
      font-weight: 500;
    }
    
    .card-number {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .qrcode-footer {
    padding: 20rpx 30rpx;
    background-color: #f5f5f5;
    text-align: center;
    
    .expire-info {
      font-size: 26rpx;
      color: #666;
    }
	}
</style>
